$alert-prefix-cls: "#{$css-prefix}alert";
$icon-prefix-cls: "#{$css-prefix}icon";

.#{$alert-prefix-cls}{
    position: relative;
    padding: $alert-padding;
    border-radius: $border-radius-base;
    color: $text-color;
    font-size: $font-size-small;
    line-height: $alert-line-height;
    margin-bottom: $alert-margin-bottom;

    &-with-icon{
        padding: $alert-with-icon-padding;
    }

    &-icon {
        font-size: $font-size-base;
        top: $alert-icon-top;
        left: $alert-icon-left;
        position: absolute;
    }

    &-desc {
        //font-family: MicrosoftYaHei;
        font-size: $alert-desc-font-size;
        color: $alert-desc-color;
        text-align: left;
        line-height: $alert-desc-line-height;
        text-align: justify;
    }

    &-success {
        border: 1px solid $alert-success-border-color;
        background-color:  $alert-success-bgcolor;
        .#{$alert-prefix-cls}-icon {
            color: $alert-success-icon-color;
        }
    }

    &-info {
        border: 1px solid $alert-info-border-color;
        background-color: $alert-info-bgcolor;
        .#{$alert-prefix-cls}-icon {
            color: $alert-info-icon-color;
        }
    }

    &-warning {
        border: 1px solid $alert-warning-border-color;
        background-color:  $alert-warning-bgcolor;
        .#{$alert-prefix-cls}-icon {
            color: $alert-warning-icon-color;
        }
    }

    &-error {
        border: 1px solid $alert-error-border-color;
        background-color: $alert-error-bgcolor;
        .#{$alert-prefix-cls}-icon {
            color: $alert-error-icon-color;
        }
    }

    &-close {
        @include content-close(-3px);
        & i.iconfont {
            color: $alert-close-iconfont-color;
        }
        & i:hover {
            color: $primary-color;
        }
    }

    &-with-desc {
        padding: $alert-with-desc-padding;
        position: relative;
        border-radius: $border-radius-base;
        margin-bottom: $alert-with-desc-margin-bottom;
        color: $text-color;
        line-height: $alert-with-desc-line-heigh;
    }

    &-with-desc &-desc{
        display: block;
    }

    &-with-desc &-message {
        // font-size: 14px;
        // font-weight: 700;
        // color: $title-color;
        // display: block;

        font-size: $alert-with-desc-message-font-size;
        font-weight: bold;
        color: $alert-message-color;
        letter-spacing: 0;
        text-align: left;
        line-height: $alert-with-desc-message-line-height;
        display: block;
    }

    &-with-desc &-icon {
        // top: 50%;
        left: $alert-with-desc-icon-left;
        // margin-top: -21px;
        & i.iconfont {
            font-size: $alert-with-desc-iconfont-font-size
        }
    }

    &-with-banner{
        border-radius: $alert-with-banner-border-radius;
    }
}
.#{$alert-prefix-cls}-with-desc.#{$alert-prefix-cls}-with-icon{
    padding: $alert-with-desc-icon-padding;
}